import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, TextInput } from 'react-native'
import Icon from './icon/index'
import PropTypes from 'prop-types';
import { px2dp } from 'rn-xiaobu-utils';

class InputTitleBar extends Component {
    state = {
      text: null
    }
    static defaultProps = {
      changeText: () => {
      },
      back: () => {
      },
      defaultText: ''
    }

    constructor(props) {
      super(props)
      console.log(this.props)
    }

    componentDidMount(): void {
      this.changeText(this.props.defaultText)
    }

    clearText = () => {
      this.changeText('')
    }

    changeText = text => {
      // console.log(text)
      this.setState({ text }, () => {
        this.props.changeText(text)
      })
    }

    render() {
      return (
        <View style={styles.container}>
          <TouchableOpacity onPress={this.props.back} style={styles.button}>
            <Icon name={'back'} size={44}></Icon>
          </TouchableOpacity>
          <TextInput style={styles.input} placeholder="搜索公交线路、站点"
            onChangeText={(text) => this.changeText(text)}
            value={this.state.text}></TextInput>
          {
            this.state.text
              ? <TouchableOpacity style={styles.button} onPress={this.clearText}>
                <Icon name={'cancel-o'} color={'#D8D8D8'} size={44}></Icon>
              </TouchableOpacity> : null
          }
        </View>
      )
    }
}

InputTitleBar.propTypes = {
  defaultText: PropTypes.string
}

export default InputTitleBar

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: px2dp(98),
    backgroundColor: '#ffffff',
    flexDirection: 'row',
    alignItems: 'center'

  },

  button: {
    paddingLeft: px2dp(30),
    paddingRight: px2dp(30)
  },

  input: {
    flex: 1
  }
})
